<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.2.1.1.js"></script>
		<script src="js/ajax.js"></script>
	</head>
	<body>
		
		
		<table border="1px" width="600px">
			
			<tr align="center">
				<th colspan="4">
					记账
				</th>
			</tr>
			
				
			<tr>
				<td>
					类型
				</td>
					
				<td colspan="3" id="scott">
						
				</td>
			</tr>
			
			<tr>
				<td>
					标题
				</td>
					
				<td colspan="3">
						<input id="title"  /> 
				</td>
			</tr>
			
			<tr >
				<td>
					日期
				</td>
					
				<td>
						<input type="date" id="billTime"  />
				</td>
				
				<td>
					金额
				</td>
					
				<td>
						<input  id="price"  /> 
				</td>
			</tr>
			
			
			<tr>
				<td>
					说明
				</td>
					
				<td colspan="3">
					<textarea id="explain"></textarea>
				</td>
						
			</tr>
			
			
			<tr align="center">
				<td >
					<input type="button"  onclick="reset2()" value="重置" />
				</td>
				<td colspan="2" >
					<input type="button" onclick="save()" value="保存" />
				</td>
					
				<td >
					<input type="button" value="返回" />
				</td>
			</tr>
			
			
		</table>
		
		
	</body>
	
	<script>
	
		function reset2(){
			
			$('#title').val('');
			$('#price').val('');
			$('#explain').val('');
			$('#billTime').val('');
			
			
		}
	
		function save(){
			
			var typeId =  $('input[name="typeId"]:checked').val();
			var title = $('#title').val();
			var billTime = $('#billTime').val();
			var price = $('#price').val();
			var explain = $('#explain').val();
			
			
			//金额输入框必须为大于 0 的数
			
			// 正则表达式
			var reg =/^[0-9]+$/;
			var rs = reg.test(price);
			console.log(rs);
			
			
			//标题输入框最长输入不能超过 25 字符
			var strlen= title.length;
			if(strlen > 25 ){
				//不发送请求
				console.log("不发送请求");
				return ;
				
			}
			
			
			
			
			if(rs==false){
				//不发送请求
				console.log("不发送请求");
				return ;
			}else{
				 price = parseInt(price);
				 if(price<=0){
					 
					 //不发送请求
					 console.log("不发送请求");
					 return ;
				 }
			}
			
			
			
			
			var data={
				
				typeId:typeId,
				title:title,
				billTime:billTime,
				price:price,
				explains:explain
				
			}
			
			// 2.1、准备发送ajax请求的数据
			var url=getRoot()+"bills/save";
			var method='POST';
			var callback=function(backData){
				var code = backData.code;
				if(code === '200'){
					window.location.href='bills-list.html';
				}
			}
			
			// 2.2、这里才是真的发送ajax请求
			send(url,method,data,callback);
			
			
			
		}
	
	
		//在页面初始化的时候= 页面加载完毕
		
		$(function(){
			
			// 2.1、准备发送ajax请求的数据
			var url=getRoot()+"billtype/all";
			var method='GET';
			var callback=function(backData){
				var code = backData.code;
				if(code === '200'){
					
					var array = backData.data;
					
					for(var index=0;index<array.length;index++){
						
						var entity = array[index];
						var id   = entity.id;
						var name = entity.name;
						var input = '<input type="radio" name="typeId" value="'+id+'"/> <span>'+name+'</span> ';
						
						$('#scott').append($(input));
						
					}
					
					//<input type="radio" value="1"/>支出
				}
			}
			
			// 2.2、这里才是真的发送ajax请求
			send(url,method,"",callback);
			
			
		});
		
		// 请求后台的某个接口 让这个接口给我数据
		// 前端拿到后端的数据后 把 组件 渲染 出来
		// {"adsdf"}  
	
		function save2(){
			//alert('-------待会进入修改商品的逻辑--------');
			
			//1 获取 表单的数据
			
			var data={
				id: $('#id').val(),
				goodsName: $('#goodsName').val(),
				goodsPrice: $('#goodsPrice').val(),
				goodsCount: $('#goodsCount').val(),
				billStatus: $('#billStatus').val()
			}
			
			console.log(data);
			
			//2 发送ajax请求
			
			// 2.1、准备发送ajax请求的数据
			var url=getRoot()+"goods/update";
			var method='POST';
			var callback=function(backData){
				var code = backData.code;
				if(code === '200'){
					window.location.href='order-list.html';
				}
			}
			
			// 2.2、这里才是真的发送ajax请求
			send(url,method,data,callback);
			
			
		}
	
	
	</script>
</html>
